<template>
	<view class="container">
		<view>选择一个身份进行对话</view>
		<view class="search">
			<input type="search" placeholder="电话号码搜索" v-model="searchWord" />
			<uni-icons type="search" size="30" color="#55aaff" @click="search"></uni-icons>
		</view>

		<!-- 用户列表 -->
		<uni-list>
			<uni-list-item
				v-for="(user, index) in userList"
				:key="index"
				:title="user.nicName"
				:note="`电话：${user.userTel}  | 半径：${user.receiveDistance}km`"
				:thumb="user.nicPic.url || ''"
				clickable
			>
				<!-- 右侧操作按钮 -->
				<template v-slot:footer>
					<view class="action-buttons">
						<uni-icons type="more-filled" size="24" @click="showActionMenu(index)"></uni-icons>
					</view>
				</template>
			</uni-list-item>
		</uni-list>

		<!-- 操作菜单弹窗 -->
		<uni-popup ref="actionPopup" type="dialog">
			<view class="action-menu">
				<text class="menu-item" @click="handleEdit">编辑用户</text>
				<text class="menu-item warning" @click="handleDeactivate">注销账号</text>
				<text class="menu-item" @click="handleSendMessage">发送-消息</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
const db = uniCloud.databaseForJQL();
export default {
	data() {
		return {
			selectedIndex: -1,
			searchWord: '',
			userList: [
				// 模拟数据
				{
					userId: '001',
					userTel: '13800138000',
					nicName: '张三',
					nicPic: '/static/avatar1.png',
					receiveDistance: 5,
					connectionTime: 1712322000
				}
				// 更多模拟数据...
			]
		};
	},
	onLoad() {
		this.initData();
	},
	mounted() {},
	methods: {
		search() {
			this.initData(this.searchWord);
		},
		async initData(searchWord="") {
			await db
				.collection('linli-user')
				.where({
					userTel: searchWord
				})
				.get()
				.then((res) => {
					this.userList = res.data;
					console.log("0000",this.userList);
				})
				.catch((error) => {
					console.error('获取数据失败:', error);
					// 可以在这里添加适当的提示，告知用户数据获取失败
				});
		},
		// 显示操作菜单
		showActionMenu(index) {
			this.$store.commit('user/SET_USER', this.userList[index]);
			this.selectedIndex = index;
			this.$refs.actionPopup.open();
		},
		// 编辑用户
		async handleEdit() {
			const selectedUser = this.userList[this.selectedIndex];
			console.log('user', JSON.stringify(selectedUser));
			const data = encodeURIComponent(JSON.stringify(selectedUser));

			uni.navigateTo({
				url: `/user/edit/edit?data=${data}`
			});
		},
		// 注销账号
		async handleDeactivate() {
			uni.showModal({
				title: '确认注销',
				content: '该操作将永久停用账号',
				success: async (res) => {
					if (res.confirm) {
						// 调用注销API
						await this.$api.user.deactivate(this.userList[this.selectedIndex].userId);
						this.userList.splice(this.selectedIndex, 1);
						uni.showToast({ title: '注销成功' });
					}
				}
			});
		},
		// 发送消息
		async handleSendMessage(e) {
			const selectedUser = this.userList[this.selectedIndex];
			const data = encodeURIComponent(JSON.stringify(selectedUser));
			uni.navigateTo({
				url: `/user/sendMsg/sendMsg?user=${data}`
			});
		}
	}
};
</script>

<style lang="scss">
.action-buttons {
	padding: 10rpx;
	display: flex;
	align-items: center;
}

.action-menu {
	background: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
	width: 300rpx;

	.menu-item {
		display: block;
		padding: 20rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		&.warning {
			color: $uni-color-error;
		}
	}
}
.search {
	margin: 20rpx 30rpx;
	padding: 20rpx 30rpx;
	/* 完整的边框设置 */
	border: 2rpx solid #eee;
	/* 固定圆角值更适合搜索框 */
	border-radius: 60rpx;
	/* 盒模型：padding和border不影响元素总宽度 */
	box-sizing: border-box;
	/* 添加轻微过渡效果 */
	transition: all 0.2s ease;
	display: flex;
}

/* 可选：添加焦点状态样式 */
.search:focus {
	outline: none;
	border-color: #ccc;
	box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
}
</style>